<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="./CSS/all.css">
</head>

<body>
    <div class="container">
        <div class="header">
            <h1>今日天气</h1>
            <h1 id="ipSearch"></h1>
        </div>
        <div class="wrapper">
            <div class="input-data">
                <input class="inputCity" type="text" required="" />
                <div class="underline"></div>
                <label>Name</label>
            </div>
        </div>
        <div class="search">
            <select class="selectMethod">
                <option checked>选择你的请求方式</option>
                <option value="axios">axios</option>
                <option value="jq">ajax</option>
                <option value="js">原生ajax</option>
            </select>
        </div>
        <div class="card">
            <div class="card-head">
                <img src="./Image/下雨.png" alt="logo" class="card-logo">
                <div class="product-detail">
                    <h2><span class="whereCity">天津</span><span>天气</span></h2>
                    <h1><span>最高气温</span><span class="highTm">17</span></h1>
                    <h1><span>最低气温</span><span class="lowTm">7</span></h1>
                </div>
            </div>
            <div class="card-body">
                <div class="product-desc">
                    <span class="product-title">
                        reporttime<b>时间</b>
                        <span class="badge">
                            New
                        </span>
                    </span>
                    <span class="product-caption">
                        <span class="cityCurrentTime">2022-10-31</span>
                    </span>
                    <span class="product-rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star grey"></i>
                    </span>
                </div>
                <div class="product-properties">
                    <span class="product-size">
                        <h4>week</h4>
                        <ul class="ul-size">
                            <li class="todayWeekFather active todayWeek "id="0"></li>
                            <li class="tomorrow" id="1"></li>
                            <li class="postnatal" id="2"></li>
                            <li class="bpostnatal" id="3"></li>
                        </ul>
                    </span>
                    <span class="product-color">
                        <h4>风向</h4>
                        <ul class="ul-color windUl">
                            <li><img src="./Image/北风.png" /></li>
                            <li><img src="./Image/西风.png" /></a></li>
                            <li><img src="./Image/南风.png" /></a></li>
                            <li><img src="./Image/东风 (1).png" /></a></li>
                            <li><img src="./Image/东风 (1).png" /></a></li>
                            <li><img src="./Image/西北风.png" /></a></li>
                            <li><img src="./Image/西南风.png" /></a></li>
                            <li><img src="./Image/东南风.png" /></a></li>
                            <li><img src="./Image/东北风.png" /></a></li>
                        </ul>
                    </span>
                </div>
            </div>
        </div>
    </div>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
        outline: none;
    }

    body {
        font-family: 'Roboto', sans-serif;
        background: #353535;
    }

    * {
        margin: 0;
        padding: 0;
        outline: none;
        box-sizing: border-box;
    }

    body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        /* background: linear-gradient(-135deg,#c850c0,#4158d0); */
    }

    .wrapper {
        width: 350px;
        background-color: #fff;
        padding: 10px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        margin: 0 auto;
        margin-bottom: 20px;
    }

    .wrapper .input-data {
        width: 100%;
        height: 40px;
        position: relative;
    }

    .wrapper .input-data input {
        width: 100%;
        height: 100%;
        border: none;
        border-bottom: 2px solid silver;
        font-size: 17px;
    }

    .input-data input:focus~label,
    .input-data input:valid~label {
        transform: translateY(-20px);
        font-size: 15px;
        color: #4158D0;
    }

    .wrapper .input-data label {
        position: absolute;
        bottom: 10px;
        left: 0;
        color: grey;
        pointer-events: none;
        transition: all 0.3s ease;
    }

    .wrapper .input-data .underline {
        position: absolute;
        bottom: 0px;
        height: 2px;
        width: 100%;
    }

    .input-data .underline:before {
        position: absolute;
        content: "";
        height: 100%;
        width: 100%;
        background: #4158D0;
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .input-data input:focus~.underline:before,
    .input-data input:valid~.underline:before {
        transform: scaleX(1);
    }


    .card {
        max-width: 350px;
        margin: 0 auto;
        border-radius: 25px;
        box-shadow: -11px 11px 1px rgba(0, 0, 0, 0.3);
    }

    .card-head {
        position: relative;
        height: 252px;
        background: linear-gradient(135deg, #9ef9fc 8%, #0008a2 83%);
        /* W3C, IE10+, FF16+, Chrome26+, Opergb(120, 191, 252)Safari7+ */
        border-radius: 25px 25px 0 0;
    }

    .card-logo {
        width: 55px;
        margin: 20px;
    }

    .product-img {
        position: absolute;
        left: 0;
        margin-top: -16px;
        margin-left: 50px;
    }

    .product-detail {
        padding: 0 20px;
        font-size: 11px;
        color: #fff;
    }

    .product-detail h2 {
        font-size: 18px;
        font-weight: 500;
        letter-spacing: 2px;
        padding-bottom: 10px;
        text-transform: uppercase;
    }

    .back-text {
        display: inline-block;
        font-size: 125px;
        font-weight: 900;
        margin-left: -7px;
        margin-top: -12px;
        opacity: 0.1;
    }

    .card-body {
        height: 255px;
        background: #fff;
        border-radius: 0 0 25px 25px;
    }

    .product-title {
        padding: 20px 20px 5px 20px;
        display: block;
        font-size: 17px;
        font-weight: 500;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .product-title b {
        font-weight: 900;
        letter-spacing: 0px;
    }

    .badge {
        position: relative;
        font-size: 10px;
        font-weight: 300;
        color: #fff;
        background: #11e95b;
        padding: 2px 5px;
        border-radius: 4px;
        top: -2px;
        margin-left: 5px;
    }

    .product-caption {
        display: block;
        padding: 0 20px;
        font-size: 10px;
        font-weight: 400;
        text-transform: uppercase;
    }

    .product-rating {
        padding: 0 20px;
        font-size: 11px;
    }

    .product-rating i.grey {
        color: #acacab;
    }

    .product-size h4 {
        font-size: 11px;
        padding: 0 21px;
        margin-top: 15px;
        padding-bottom: 10px;
        text-transform: uppercase;
    }

    .ul-size {
        margin-left: 15px;
    }

    .ul-size li {
        width: 20px;
        height: 20px;
        list-style: none;
        float: left;
        margin-right: 20px;
        text-align: center;
        line-height: 20px;
        cursor: pointer;
    }

    .ul-size li a {
        display: inline-block;
        text-decoration: none;
        font-size: 11px;
        width: 22px;
        height: 22px;
        border-radius: 100%;
        text-align: center;
        line-height: 23px;
        color: #000;
    }

     .active {
        background: #f35e3d;
        color: #fff;
        border-radius: 20px;
    }

    .product-size:before,
    .product-size:after {
        content: '';
        display: block;
        clear: both;
    }

    .product-color h4 {
        font-size: 11px;
        padding: 0 21px;
        margin-top: 20px;
        padding-bottom: 20px;
        text-transform: uppercase;
    }

    .ul-color {
        margin-left: 27px;
    }

    .ul-color li {
        list-style: none;
        float: left;
        margin-right: 20px;
    }

    .ul-color li img {
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 100%;
    }

    .ul-color-li-img-add {
        border: .5px solid orangered;
    }

    .ul-color li a.orange {
        background: #f35e3d;
    }

    .ul-color li a.green {
        background: #11e95b;
    }

    .ul-color li a.yellow {
        background: #ffd414;
    }

    .ul-color li a.active:after {
        position: absolute;
        content: '';
        display: inline-block;
        border: 1px solid #f35e3d;
        width: 24px;
        height: 24px;
        border-radius: 100%;
        margin-left: -5px;
        margin-top: -5px;
    }

    .product-price {
        position: absolute;
        background: #11e95b;
        padding: 7px 20px;
        text-align: center;
        display: inline-block;
        font-size: 24px;
        font-weight: 200;
        color: #fff;
        border-radius: 7px;
        margin-top: -13px;
        margin-left: -5px;
        box-shadow: -10px 20px 15px -10px rgba(17, 233, 91, 0.3);
    }

    .product-price b {
        margin-left: 5px;
    }



    .yt {
        position: fixed;
        padding: 7px 10px 3px 10px;
        top: 5px;
        right: 5px;
        background: rgba(0, 0, 0, 0.1);
    }

    .yt:hover {
        background: rgba(0, 0, 0, 0.2);
    }
</style>
<script type="module">
    import * as method from './JS/everyMethodTwo.js'
    $(document).ready(function () {
        let city = ""
        let currentCityTm = {}
        let ipCity = ""
        xhrJqFindIp()
        $('.selectMethod').change(function (event) {
            if(localStorage.getItem('weather')!=null){
                localStorage.removeItem('weather')
            }
            let cityValue=$('.inputCity')[0].value
            if(cityValue!=null){
            let url=`https://restapi.amap.com/v3/weather/weatherInfo?key=3bf9860fb71f22a636e1758b76603bbb&city=${cityValue}&subdistrict=1&output=JSON&extensions=all`    
            let value = event.target.value
            if (value == 'jq') {
                method.xmlFindJq('GET', url, jqXhrGetData)
            } else if (value == 'axios') {
                method.axiosFind('GET', url, axiosGetData)
            } else if (value == 'js') {
                method.xmlFindJs('GET', url, jsXhrGetData)
            }
        }else{
            alert('请输入城市')
        }
        })
        function axiosGetData(response) {
            console.log('axios',response)
            execudateData(response.data,0)


        }
        function jqXhrGetData(response) {
          execudateData(response,0)

        }
        function jsXhrGetData(response) {
            console.log('js',response)
            execudateData(JSON.parse(response),0)

        }

        function execudateData(data,number) {
            
          try {
            if(data.forecasts.length<1){
                alert('今日查询次数过多，明天再来吧')
            }
          } catch (error) {
            throw error
          }finally{

          }
            localStorage.setItem('weather',JSON.stringify(data))
            currentCityTm = data.forecasts[0]
            let currentDayWeather = currentCityTm.casts[number].dayweather
            if (currentDayWeather == '晴') {
             $('.card-logo').attr('src','./Image/晴天.png')
            } else if (currentDayWeather == '阴' || currentDayWeather == '多云') {
               $('.card-logo').attr('src','./Image/下雪.png')
            } else if (currentDayWeather.includes('雨')) {
                $('.card-logo').attr('src','./Image/下雪.png')
            } else if (currentDayWeather.includes('雪')) {
            $('.card-logo').attr('src','./Image/下雪.png')
            } else {
                $('.card-logo').attr('src','./Image/晴天.png')
            }
            $('.card-logo').src = currentCityTm.casts[number].dayweather
            $('.whereCity').text(currentCityTm.city)
            $('.cityCurrentTime').text(currentCityTm.reporttime)

            $('.highTm').text(currentCityTm.casts[number].daytemp)
            $('.lowTm').text(currentCityTm.casts[number].nighttemp)
            let currentWeek = Number(currentCityTm.casts[0].week)
            $('.todayWeek').text(currentCityTm.casts[0].week)
            $('.tomorrow').text(currentCityTm.casts[1].week)
            $('.postnatal').text(currentCityTm.casts[2].week)
            $('.bpostnatal').text(currentCityTm.casts[3].week)
            let currentWind = currentCityTm.casts[number].daywind
            let currentWindLi = $('.windUl').children()
            let activeWind=$('.ul-color-li-img-add')
            console.log(activeWind)
            if(activeWind.length>0){
                activeWind.removeClass('ul-color-li-img-add')
            }
            if (currentWind == '北') {
                currentWindLi[0].children[0].classList.add('ul-color-li-img-add')
            } else if (currentWind == '西') {
                currentWindLi[1].children[0].classList.add('ul-color-li-img-add')
            } else if (currentWind == '东') {
                currentWindLi[2].children[0].classList.add('ul-color-li-img-add')
            } else if(currentWind=='南') {
                currentWindLi[3].children[0].classList.add('ul-color-li-img-add')
            }else if(currentWeek=='西北'){
                currentWindLi[4].children[0].classList.add('ul-color-li-img-add')
            }else if(currentWind=='西南'){
                currentWindLi[5].children[0].classList.add('ul-color-li-img-add')
            }else if(currentWind=='东南'){
                currentWindLi[6].children[0].classList.add('ul-color-li-img-add')
            }else if(currentWind=='东北'){
                currentWindLi[7].children[0].classList.add('ul-color-li-img-add')
            }
        }
        let jumpImg = $('.ul-size li')
        let jumpList=document.querySelectorAll('.ul-size li')

        for (var i = 0; i < jumpList.length; i++) {
            jumpList[i].addEventListener('click',function () {
                let currentDay=$('.active')
                currentDay.removeClass('active')
                this.classList.add('active')
                let data=JSON.parse(localStorage.getItem('weather'))
                execudateData(data,this.id)
            })
        }
        function xhrJqFindIp() {
            if(localStorage.getItem('weather')!=null){
                localStorage.removeItem('weather')
            }
            $.get('https://restapi.amap.com/v3/ip?key=3bf9860fb71f22a636e1758b76603bbb', function (data, status) {
                ipCity = data.city
                $('#ipSearch').text(`你现在的定位是在${data.city}`)
                city=data.city
                method.axiosFind('GET',`https://restapi.amap.com/v3/weather/weatherInfo?key=3bf9860fb71f22a636e1758b76603bbb&city=${city}&subdistrict=1&output=JSON&extensions=all`,axiosGetData)
            })

        }

    })
    
</script>